<template>
<Top></Top>
<div>
<router-view />
</div>

<van-tabbar v-model="active">
  <van-tabbar-item replace to="/">
    <span>主页</span>
    <template #icon="props">
      <img :src="props.active ? icon.active : icon.inactive" />
    </template>
  </van-tabbar-item>
  <van-tabbar-item replace to="/hb">
    <span>任务中心</span>
    <template #icon="props">
      <img :src="props.active ? icon2.active : icon2.inactive" />
    </template>
  </van-tabbar-item>
  <van-tabbar-item replace to="/center">
    <span>个人中心</span>
    <template #icon="props">
      <img :src="props.active ? icon3.active : icon3.inactive" />
    </template>
  </van-tabbar-item>
</van-tabbar>
</template>

<script>
import { Tabbar, TabbarItem } from 'vant';
import { ref } from 'vue';
import Top from './Top.vue';
export default {
    components: {
        'van-tabbar' : Tabbar,
        'van-tabbar-item' : TabbarItem,
        'Top': Top
    },
    setup() {
        //自定义的图标
    const active = ref(0);
    const icon = {
      active: 'https://img-blog.csdnimg.cn/6e36dce62f6b45d19adc1e91301d1db0.png',
      inactive: 'https://img-blog.csdnimg.cn/12cf040edb7e4d3a81295d040b9804e7.png',
    };
    const icon2 = {
      active: 'https://img-blog.csdnimg.cn/79c3ae9e345d47f19daa848f0e240212.png',
      inactive: 'https://img-blog.csdnimg.cn/d2fb800d148d4285ab89b53bc23a615d.png',
    };
    const icon3 = {
      active: 'https://img-blog.csdnimg.cn/c542119e2f4c4704981a6b595a18a7af.png',
      inactive: 'https://img-blog.csdnimg.cn/9d244ef4b0524a5e95dc1834f5263d57.png',
    };
    return {
      icon,
      active,
      icon2,
      icon3,
    };
  },
}
</script>

<style>

</style>